<template xmlns:el-table="http://www.w3.org/1999/html">
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 用户订单管理列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-form :model="query" :inline="true">
                    <el-form-item label="订单时间范围:">
                        <el-date-picker
                                class="handle-select mr20 "
                                v-model="query.startDate"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择开始日期"
                                :picker-options="pickerOptions0">
                        </el-date-picker><sapn>--</sapn>
                        <el-date-picker
                                class="handle-select mr20"
                                v-model="query.endDate"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择结束日期"
                                :picker-options="pickerOptions1">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="订单状态:">
                        <el-select v-model="query.status"
                                   placeholder="请选择订单状态"
                                   class="handle-select mr10">
                            <el-option value="已完成">已完成</el-option>
                            <el-option value="进行中">进行中</el-option>
                            <el-option value="用户已删除">用户已删除</el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <el-form-item label="订单编号:">
                        <el-input v-model="query.ordernum"
                                  placeholder="请输入订单编号"
                                  class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="用户编号:">
                        <el-input v-model="query.user"
                                  placeholder="请输入用户ID"
                                  class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleBtnQuery()">搜索</el-button>
                    </el-form-item>
                    <el-button
                            type="primary"
                            icon="el-icon-refresh"
                            class="handle-select"
                            @click="handlerefresh()"
                    >刷新列表</el-button>
                </el-form>
            </div>

            <el-table
                    :data="tableData.list"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header">
                <el-table-column
                        prop="orderdate"
                        label="下单时间"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="ordernumber"
                        label="订单编号"
                        align="center" >
                </el-table-column>
                <el-table-column
                        label="电影信息"
                        align="center" >
                    <template slot-scope="scope">
                        <el-image
                                class="table-td-thumb"
                                referrer="no-referrer|origin|unsafe-url"
                                :src="scope.row.picturepath"
                                :preview-src-list="[scope.row.picturepath]"
                                style="-webkit-user-select: none;margin: auto;cursor:zoom-in;"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="moviechinesename"
                        align="center" >
                </el-table-column>
                <el-table-column
                        prop="cinemaname"
                        label="影院信息"
                        align="center" >
                </el-table-column>
                <el-table-column
                        prop="cinemahalltypename"
                        align="center" >
                </el-table-column>
                <el-table-column
                        prop="seatarray"
                        align="center" >
                </el-table-column>
                <el-table-column
                        prop="allprice"
                        label="订单价格"
                        align="center" >
                </el-table-column>
                <el-table-column
                        label="订单状态"
                        align="center">
                    <template slot-scope="scope">
                        <p v-if="scope.row.orderstatus=='1'" style="font-size: larger ;color: green">已完成</p>
                        <p v-else-if="scope.row.orderstatus=='2'" style="font-size: larger ;color: brown">进行中</p>
                        <p v-else-if="scope.row.orderstatus=='3'" style="font-size: larger ;color: red">用户已删除</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80" align="center">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button
                                    type="text"
                                    icon="el-icon-document"
                                    class="grenn"
                                    @click="showOrdertails(scope.$index,scope.row)"
                            >查看详情</el-button>
                        </el-row>
                    </template>
                </el-table-column>

            </el-table>
            <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="query.currentPage"
                        :page-sizes="[1,15, 30, 50, 100]"
                        :page-size="query.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="currentTotal"
                ></el-pagination>
            </div>
        </div>
        <!--订单详情框-->
        <el-dialog title="订单详情" append-to-body :visible.sync="showOd" width="75%">
            <span class="title-age"> 订单时间：{{singleOrder.orderdate}}<p/>
                                    订单编号：{{singleOrder.ordernumber}}
                <p align="right">（有订单问题可拨打蜗牛客服电话1010-8888666，工作时间: 9:00-24:00）</p>
            </span>
            <span solt="" class="el-dialog-body">
                <el-table :data="singleOrderForm"
                          style="width: 100%">
                    <el-table-column
                            label="电影"
                            align="center">
                        <template slot-scope="scope">
                        <el-image
                                class="table-td-thumb"
                                referrer="no-referrer|origin|unsafe-url"
                                :src="scope.row.picturepath"
                                :preview-src-list="[scope.row.picturepath]"
                                style="-webkit-user-select: none;margin: auto;cursor:zoom-in;width: 50px;height: 70px"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="moviechinesename"
                        align="center">
                </el-table-column>
                    <el-table-column
                            prop="movieduration"
                            align="center">
                </el-table-column>

                </el-table>
                <el-table :data="singleOrderForm"
                          style="width: 100%">
                    <el-table-column
                            label="影院"
                            prop="cinemaname"
                            align="center">
                            </el-table-column>
                     <el-table-column
                                    prop="cinemahalltypename"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="cinemaphone"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="cinemaaddress"
                                    align="center">
                            </el-table-column>
                </el-table>

                <el-table :data="singleOrderForm"
                          style="width: 100%">
                    <el-table-column label="用户ID"
                                     prop="userid"
                                     align="center">
                    </el-table-column>
                    <el-table-column
                            label="用户昵称"
                            prop="nickname"
                            align="center">
                            </el-table-column>
                    <el-table-column
                            label="座位"
                            prop="seatarray"
                            align="center">
                            </el-table-column>
                    <el-table-column
                            label="订单状态"
                            align="center">
                        <template slot-scope="scope">
                        <p v-if="scope.row.orderstatus=='1'" style="font-size: larger ;color: green">已完成</p>
                        <p v-else-if="scope.row.orderstatus=='2'" style="font-size: larger ;color: brown">进行中</p>
                        <p v-else-if="scope.row.orderstatus=='3'" style="font-size: larger ;color: red">用户已删除</p>
                        </template>
                            </el-table-column>


                </el-table>


            </span>
            <span slot="footer" class="dialog-footer">
                <p style="color: red">总价：￥{{singleOrder.allprice}}</p>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Order",
        data(){
            return{
                query:{
                    ordernum:'',
                    user:'',
                    status:'',
                    startDate:'',
                    endDate:'',
                    currentPage:'',
                    pageSize:'',
                },
                nowdate:'',
                currentTotal:'',
                tableData: [],

                showOd:false,
                singleOrder:{
                    orderdate:'',
                    ordernumber:'',
                    orderstatus:'',
                    seatarray:'',
                    allprice:'',

                    cinemaname:'',
                    cinemahalltypename:'',
                    cinemaphone:"",
                    cinemaaddress:'',

                    userid:'',
                    nickname:'',

                    moviechinesename:'',
                    picturepath:'',
                    movieduration:'',

                },
                singleOrderForm:[],

                pickerOptions0: {
                    disabledDate:(time)=> {
                        return time.getTime() > Date.now() - 8.64e7 ;
                    }
                },
                pickerOptions1: {
                    disabledDate:(time)=> {
                        if (this.query.startDate==''){
                            return true
                        }
                        if (time.getTime()<this.query.startDate){
                            return true
                        }
                        return time.getTime() > Date.now()- 8.64e7 ;
                    }
                },

            };
        },
        created() {
            this.getDate();

        },
        methods:{
            handlerefresh(){
                this.axios.get("api/OrderDTO/showOrderAll",null).then((data)=>{
                    this.tableData = data.data.pageInfo;
                    this.query.startDate = '';
                    this.query.endDate = '';
                    this.query.ordernum = '';
                    this.query.user = '';
                    this.query.status = '';
                    this.currentTotal = data.data.pageInfo.total;
                    this.query.pageSize = data.data.pageInfo.pageSize;
                    this.query.currentPage = data.data.pageInfo.pageNum;
                })
            },
            handleBtnQuery(){
                this.getDate();
            },
            // 订单详情展示
            showOrdertails(index, row){
                this.singleOrder = row;
                this.singleOrderForm[0] = row;
                this.showOd = true;
            },

            //分页方法
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getDate();
            },
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getDate();
            },
            //封装的方法
            getDate(){
                this.axios.get("api/OrderDTO/showOrderAll",{params:this.query}).then((data)=>{
                    this.tableData = data.data.pageInfo;
                    this.query.ordernum = data.data.ordernum;
                    this.query.user = data.data.user;
                    this.query.status = data.data.status;
                    this.query.endDate = data.data.endDate;
                    this.query.startDate = data.data.startDate;
                    this.currentTotal = data.data.pageInfo.total;
                    this.query.pageSize = data.data.pageInfo.pageSize;
                    this.query.currentPage = data.data.pageInfo.pageNum;
                })
            }
        }
    }
</script>

<style scoped>

</style>